<!-- 新建优惠券 -->
<template>
  <div>
    <div style=" margin-left: 120px;">
      <h2 style="text-align: left;">营销管理/优惠券设置</h2>
    </div>
    <div style="width: 100%; margin-bottom: 40px;"><hr /></div>
    <div style="margin-left: 30px;">
      <h2 style="margin-left: 15px;">基本信息</h2>

      <el-form
        class="create"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="200px"
      >
        <el-form-item label="名称" prop="name"
          ><el-input
            style="width: 700px;"
            v-model="ruleForm.name"
            placeholder="例如:满100减80,最多20字"
          ></el-input
        ></el-form-item>

        <el-form-item label="类型" prop="resource">
          <div class="d-flex">
            <el-radio-group v-model="ruleForm.resource">
              <div style="margin-top: 15px;">
                <el-radio label="1"><div class="fonts">满减</div></el-radio>
              </div>
              <div style="margin-top: 40px;">
                <el-radio label="2"><div class="fonts">立减</div></el-radio>
              </div>
              <div style="margin-top: 46px;">
                <el-radio label="3"><div class="fonts">折扣</div></el-radio>
              </div>
            </el-radio-group>
            <div>
              <div class="d-flex font">
                当车主消费大于等于&nbsp;&nbsp;
                <el-input style="width:90px;" v-model="greaterThen"></el-input>
                &nbsp;&nbsp;元时,可直接减少支付&nbsp;&nbsp;
                <el-input style="width:90px" v-model="pay1"></el-input>
                &nbsp;&nbsp;元
              </div>
              <div class="d-flex font">
                当车主消费时,可直接减少支付&nbsp;&nbsp;
                <el-input style="width:90px" v-model="pay2"></el-input>
                &nbsp;&nbsp;元
              </div>
              <div class="d-flex font">
                当车主消费大于等于&nbsp;&nbsp;
                <el-input style="width:90px" v-model="ge"></el-input>
                &nbsp;&nbsp;元时,可直接减少支付&nbsp;&nbsp;
                <el-input style="width:90px" v-model="pay3"></el-input>
                &nbsp;&nbsp;折
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="推广时间" prop="date1">
          <el-date-picker
            v-model="ruleForm.date1"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="使用时间" prop="date2">
          <el-date-picker
            v-model="ruleForm.date2"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="优惠券说明" prop="desc">
          <el-input
            type="textarea"
            placeholder="请输入优惠券说明，车主在查看优惠券时会看到此说明，推荐编写如何使用，最多不超过50字"
            style="width: 700px;"
            v-model="ruleForm.desc"
          ></el-input>
        </el-form-item>
        <div class="d-flex">
          <el-form-item
            label="发放数量上限"
            prop="num1"
            :rules="[
              { required: true, message: '请输入发放数量上限' },
              { type: 'number', message: '请正确输入数量' },
            ]"
          >
            <el-input
              type="age"
              v-model.number="ruleForm.num1"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            style="margin-left: 20px;"
            label="每人最多领取数量"
            prop="num2"
            :rules="[
              { required: true, message: '每人最多领取数量' },
              { type: 'number', message: '请正确输入数量' },
            ]"
          >
            <label slot="label"
              >每人最多领取数量<el-popover
                placement="top-start"
                width="170"
                trigger="hover"
                content="每个用户最多可领取的数量"
                ><i class="el-icon-question" slot="reference"></i></el-popover
            ></label>
            <el-input
              type="age"
              v-model.number="ruleForm.num2"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="单次可用数量"
            prop="num3"
            :rules="[
              { required: true, message: '单次可用数量' },
              { type: 'number', message: '请正确输入数量' },
            ]"
          >
            <label slot="label"
              >单次可用数量<el-popover
                placement="top-start"
                width="160"
                trigger="hover"
                content="单笔交易最多可用的数量"
                ><i class="el-icon-question" slot="reference"></i></el-popover
            ></label>
            <el-input
              type="age"
              v-model.number="ruleForm.num3"
              autocomplete="off"
             
            ></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item
            label="一体机展示"
            prop="resource2"
            class="oneMachineShow"
          >
            <el-radio-group v-model="ruleForm.resource2">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-form>
      <h2 style="margin-left: 15px;">使用条件</h2>

      <el-form
        :model="useConditionModel"
        :rules="useConditionRules"
        label-width="200px"
      >
        <el-form-item label="交易" prop="transaction">
          <el-checkbox-group
            v-model="useConditionModel.transaction"
            @change="transactionChange"
          >
            <el-checkbox label="服务消费" name="transaction"></el-checkbox>
            <el-checkbox label="商品消费" name="transaction"></el-checkbox>
            <el-checkbox
              label="会员价购买、充值"
              name="transaction"
            ></el-checkbox>
            <el-checkbox label="可叠加使用" name="transaction"></el-checkbox>
            <el-checkbox
              label="可与储值卡共享"
              name="transaction"
            ></el-checkbox>
          </el-checkbox-group>
          <!-- 选择服务 -->
        </el-form-item>
        <el-form-item label="服务" class="serveStyle">
          <el-input
            placeholder="+选择支持的服务项目"
            style="width:400px;margin-right:20px"
            @focus="serveInputFocus"
          >
            <el-badge value="X" class="serveChecked" slot="suffix">
              <el-button size="small">服务1</el-button>
            </el-badge>
          </el-input>
          <el-checkbox v-model="useConditionModel.serve.radio"
            >全部服务</el-checkbox
          >
          <!-- 选择商品 -->
        </el-form-item>
        <el-form-item label="商品" class="serveStyle">
          <el-input
            placeholder="+选择支持的商品项目"
            style="width:400px;margin-right:20px"
            @focus="shopInputFocus"
          >
            <el-badge value="X" class="serveChecked" slot="suffix">
              <el-button size="small">商品1</el-button>
            </el-badge>
          </el-input>
          <el-checkbox v-model="useConditionModel.shop.radio"
            >全部商品</el-checkbox
          >
        </el-form-item>
        <el-form-item label="会员卡" class="vipCardStyle">
          <el-select
            v-model="useConditionModel.vipCard.checkedList"
            placeholder="请选择会员卡"
            style="width:400px;margin-right:20px"
          >
            <el-option label="会员卡1" value="会员卡1"></el-option>
            <el-option label="会员卡2" value="会员卡2"></el-option>
          </el-select>
          <el-checkbox v-model="useConditionModel.vipCard.radio"
            >全部会员卡</el-checkbox
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="bottomThreeBtn">
      <el-button @click="goBackBtn">返回</el-button>
      <el-button type="primary">保存</el-button>
      <el-button type="primary">发布</el-button>
    </div>

    <!-- 选择服务弹窗 -->
    <el-dialog
      title="选择服务"
      :visible.sync="servePop"
      width="50%"
      style="font-size:30px;border:1px solid #a1a1a1;border-radius:10px"
    >
      <div class="servePopContent">
        <div class="left">
          <el-menu
            default-active="0-0"
            class="el-menu-vertical-demo"
            :unique-opened="true"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-submenu index="0">
              <template slot="title">
                <span>洗车</span>
              </template>
                <el-menu-item index="0-0">精洗</el-menu-item>
                <el-menu-item index="0-1">普洗</el-menu-item>
            </el-submenu>
            <el-submenu index="1">
              <template slot="title">
                <span>喷漆</span>
              </template>
                <el-menu-item index="1-0">精喷</el-menu-item>
                <el-menu-item index="1-1">普喷</el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
        <div class="middle">
          <div class="tableHead itemStyle">
            <div>名称</div>
            <div>价格</div>
            <div>选择</div>
          </div>
          <div class="itemStyle">
            <div>洗车会员卡</div>
            <div>￥300</div>
            <div><el-checkbox v-model="checked"></el-checkbox></div>
          </div>
          <div class="itemStyle">
            <div>会员精致洗车</div>
            <div>￥300</div>
            <div><el-checkbox v-model="checked"></el-checkbox></div>
          </div>
        </div>
        <div class="right">
          <div style="height:40px;color:blue">已选项目</div>
          <div class="checkedItem">
            <div>【服务】洗车会员卡</div>
            <div><i class="el-icon-close"></i></div>
          </div>
          <div class="checkedItem">
            <div>【服务】五座精洗</div>
            <div><i class="el-icon-close"></i></div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 选择商品弹窗 -->
    <el-dialog
      title="选择商品"
      :visible.sync="shopPop"
      width="50%"
      style="font-size:30px;border:1px solid #a1a1a1;border-radius:10px"
    >
      <div class="servePopContent">
        <div class="left">
          <el-menu
            default-active="0-0"
            class="el-menu-vertical-demo"
            :unique-opened="true"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-submenu index="0">
              <template slot="title">
                <span>一级导航</span>
              </template>
                <el-menu-item index="0-0">二级导航1</el-menu-item>
                <el-menu-item index="0-1">二级导航2</el-menu-item>
            </el-submenu>
            <el-submenu index="1">
              <template slot="title">
                <span>一级导航</span>
              </template>
                <el-menu-item index="1-0">二级导航3</el-menu-item>
                <el-menu-item index="1-1">二级导航4</el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
        <div class="middle">
          <div class="tableHead itemStyle">
            <div>名称</div>
            <div>价格</div>
            <div>选择</div>
          </div>
          <div class="itemStyle">
            <div>洗车会员卡</div>
            <div>￥300</div>
            <div><el-checkbox v-model="checked"></el-checkbox></div>
          </div>
          <div class="itemStyle">
            <div>会员精致洗车</div>
            <div>￥300</div>
            <div><el-checkbox v-model="checked"></el-checkbox></div>
          </div>
        </div>
        <div class="right">
          <div style="height:40px;color:blue">已选项目</div>
          <div class="checkedItem">
            <div>【商品】洗车会员卡</div>
            <div><i class="el-icon-close"></i></div>
          </div>
          <div class="checkedItem">
            <div>【商品】五座精洗</div>
            <div><i class="el-icon-close"></i></div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      servePop: false,//控制服务弹窗
      shopPop:false,//控制商品弹窗
      //折扣大于
      pay3: "",
      ge: "",

      // 立减减少
      pay2: "",

      //满减大于
      greaterThen: "",
      pay1: "",

      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        desc: "",
        num1: "",
        num2: "",
        num3: "",
        delivery: false,
        type: [],
        resource: "",
        resource2: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 1, max: 20, message: "名称在1~20字之间", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          { required: true, message: "请选择推广日期范围", trigger: "blur" },
        ],
        date2: [
          { required: true, message: "请选择使用日期范围", trigger: "blur" },
        ],
        type: [
          { required: true, message: "请选择活动性质", trigger: "change" },
        ],
        resource: [
          { required: true, message: "请选择类型", trigger: "change" },
        ],
        resource2: [
          {
            required: true,
            message: "请选择一体机是否展示",
            trigger: "change",
          },
        ],
        desc: [
          { required: true, message: "请填写优惠券说明", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "优惠券说明在1~50字之间",
            trigger: "blur",
          },
        ],
      },
      //使用条件相关数据
      useConditionModel: {
        transaction: [], //选择的交易
        serve: {
          radio: true,
          checkedList: [], //选择的服务
          list: [], //从服务器拿到的数据
        },
        shop: {
          radio: true,
          checkedList: [], //选择的商品
          list: [], //从服务器拿到的数据
        },
        vipCard: {
          radio: true,
          checkedList: "", //选择的会员卡
          list: [], //从服务器拿到的数据
        },
      },
      useConditionRules: {
        transaction: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个交易类型",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {},
  methods: {
    //当使用条件中的交易多选发生变化触发
    transactionChange() {
      console.log(this.useConditionModel.transaction);
    },
    //点击返回按钮
    goBackBtn() {
      this.$router.go(-1);
    },
    //选择服务输入框获取焦点
    serveInputFocus() {
      console.log("选择服务输入框获取焦点");
      this.servePop = true;
    },
     //选择商品输入框获取焦点
    shopInputFocus(){
      console.log("选择商品输入框获取焦点");
      this.shopPop = true;
    }
  },
  mounted() {},
  created() {}, //生命周期 - 创建之后
};
</script>

<style scoped>
.fonts {
  font-size: 16px;
}
.font {
  font-size: 19px;
  margin-left: 50px;
  margin-bottom: 20px;
}
/deep/ .el-form-item__label {
  font-size: 19px;
}
/deep/ .el-radio {
  display: flex;
}
.oneMachineShow .el-radio {
  display: unset;
}
/deep/ .el-badge__content.is-fixed {
  top: 10px;
  right: 12px;
}
.serveChecked {
  margin: 0 5px;
}
.serveStyle /deep/ .el-form-item__content {
  display: flex;
}
.bottomThreeBtn {
  text-align: center;
}
.bottomThreeBtn button {
  width: 120px;
  margin: 0 20px;
}

/* 服务弹窗 */
.servePopContent {
  display: flex;
}
.servePopContent .left {
  width: 25%;
  border-right: 1px solid #a1a1a1;
  padding: 10px 0;
}
.servePopContent .middle {
  width: 45%;
  border-right: 1px solid #a1a1a1;
   padding: 10px;
}
.servePopContent .middle .tableHead{
  background: #f1f1f1;
}
.servePopContent .middle .tableHead>div{
  border: 1px solid #a1a1a1;
}
.servePopContent .middle .tableHead>div:nth-child(1){
  border-right: 0;
}
.servePopContent .middle .tableHead>div:nth-child(2){
  border-right: 0;
}
.servePopContent .middle .itemStyle{
  display: flex;
  padding: 3px 0;
}
.servePopContent .middle .itemStyle>div:nth-child(1){
  width: 50%;
  text-align: center;
}
.servePopContent .middle .itemStyle>div:nth-child(2){
  width: 25%;
  text-align: center;
}
.servePopContent .middle .itemStyle>div:nth-child(3){
  width: 25%;
  text-align: center;
}
.servePopContent .right {
  width: 30%;
  padding: 10px;
}
.servePopContent .right .checkedItem {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
}
/deep/ .el-dialog__body{
  padding: 0;
}
/deep/ .el-dialog{
  border-radius: 10px;
  border: 1px solid #a1a1a1;
}
/deep/ .el-dialog__header{
  border-bottom:  1px solid #a1a1a1;
}
</style>
